<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .flexdiv{
            width: 500px;
            height: 100px;
            display: flex;/*让元素成为弹性盒子，这样其子元素就按照样式所指定的相关规则进行弹性布局*/
            flex-wrap: wrap;/*一行放不下会换行*/
            justify-content : flex-start;/*子元素在水平方向的对齐方式，本来靠左*/
            align-items: stretch;/*子元素在垂直方向的对齐方式，本来展示默认值，子元素如果高度auto，会被拉伸以铺满父元素，但是受maxHeight、minHeight的影响*/
        }
        .divitem{
            width: 100px;
            margin: 10px;
            flex: 1;
            background: aqua;
        }
        .divitem:first-child{
            flex: 3;/*子元素的flex属性好像才是网上提到的弹性布局的主要内容，像本例第一个弹性元素占比为3，其余为1，那么第一个弹性元素在弹性容器中的宽度占3/5*/
        }
    </style>
</head>
<body>
<div class="flexdiv">
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
</div>
</body>
</html>